$color-black:        #000000 !default;
$color-white:        #ffffff !default;

$color-gray-300:       #333333 !default; // 官方配色，所有字体默认色
$color-gray-500:       #555555 !default; // 官方配色，primary 按钮字体
$color-gray-600:       #666666 !default; // 官方配色，进度条文字，折叠面板文字
$color-gray-700:       #777777 !default; // 官方配色，字体悬浮色
$color-gray-900:       #999999 !default; // 官方配色，用于三角，文本强调，表单选择框的占位色
$color-gray-c200:      #c2c2c2 !default; // 官方配色，表单选择框的三角色，复选框悬浮色
$color-gray-c900:      #c9c9c9 !default; // 官方配色，primary 按钮边框，禁用文本色，表单聚焦色
$color-gray-c00:       #cccccc !default; // 官方配色，表格工具组件边框色
$color-gray-d200:      #d2d2d2 !default; // 官方配色，禁用，表单悬浮色，表单选择框的下拉框边框色，复选框边框色
$color-gray-d00:       #dddddd !default; // 官方配色，编码组件边框色
$color-gray-e200:      #e2e2e2 !default; // 官方配色，进度条背景
$color-gray-e600:      #e6e6e6 !default; // 官方配色，常规面板上边框，禁用边框色
$color-gray-e00:       #eeeeee !default; // 官方配色
$color-gray-f000:      #f0f0f0 !default; // 官方配色
$color-gray-f200:      #f2f2f2 !default; // 官方配色，引用背景，折叠面板背景，表单选择框的下拉框悬浮色
$color-gray-f600:      #f6f6f6 !default; // 官方配色，卡片边框色 [悬浮色]
$color-gray-f800:      #f8f8f8 !default; // 官方配色，轮播背景色
$color-gray-fb00:      #fbfbfb !default; // 官方配色，禁用背景色

$color-green:        #009688 !default; // 官方配色，通常用于按钮、及任何修饰元素，引用边框色
$color-blue:         #1e9fff !default; // 官方配色
$color-red:          #ff5722 !default; // 官方配色，比较引人注意的颜色
$color-orange:       #ffb800 !default; // 官方配色，暖色系，一般用于提示性元素
$color-lightgreen:   #5fb878 !default; // 官方配色，一般用于选中状态，进度条，表单选择框的选中色 (移除)
$color-lightblue:    #01aaed !default; // 官方配色，用于文字着色，如链接文本 (移除)
$color-darkblue:     #2f4056 !default; // 官方配色，侧边或底部普遍采用的颜色，进度条，表单选择框的选中色
$color-dark:         #393d49 !default; // 官方配色，通常用于导航

$color-primary: $color-green !default; // layui 主题色
$color-primary-100: mix($color-white, $color-primary, 10%) !default;
$color-success: $color-green !default;
$color-warning: $color-orange !default;
$color-danger:  $color-red !default;
$color-info:    $color-gray-c200 !default;

// Text
$text-color:          rgba($color-black, .85); // $color-gray-300;
$text-active-color:   $color-gray-700;
$text-disabled-color: $color-gray-d200; // c9, c2
$text-size:           14px;

// Border
$border-color: $color-gray-e600;
$border-lighter-color: $color-gray-f600;
$border-disabled-color: $border-color;
$border-active-color: $color-gray-d200;

// Zindex
$index: 1000;

// Spacer
$space: 15px;
$space-lg: 20px;

// Transition
$transition-duration: .3s;

// Theme
$body-bg: #f7f7fa;

// grid
$grid-small: 768px;
$grid-medium: 992px;
$grid-large: 1200px;
$grid-breakpoints: (
  xs: (max-width: $grid-small - 1),
  sm: (min-width: $grid-small),
  md: (min-width: $grid-medium),
  lg: (min-width: $grid-large)
);

// Header
$header-height: 48px;
$header-bg: $color-white;
$header-mobile-height: 80px;

// Side
$side-width: 208px;
$side-bg: #20222a;
$side-shrink-width: $header-height;
$side-item-height: 40px;

// Footer
$footer-height: $side-item-height;

// Dropdown
$dropdown-border-color: $color-gray-d200;
$dropdown-bg: $color-white;
$dropdown-hover-bg: $color-gray-f200;

// Pagetabs
$pagetabs-hover-bg: $color-gray-f800;
$pagetabs-height: 32px;

// ViewPopup
$view-popup-height: 50px;
$view-popup-logout-theme: #f56c6c;

// Tooltip
$tooltip-index: 100 * $index;

// Page
$page-gutter: 20px;
